<template>
  <div class="box">
    <el-divider content-position="center">发病情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>本次是</span>&nbsp;&nbsp;
        <span>{{ info.morbidityCondition === 1 ? '复诊' : '初诊' }}</span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>发病时间 :</span>&nbsp;&nbsp;
        <div class="box-border">
          {{ info.morbidityTime ? info.morbidityTime : '无' }}
        </div>
      </div>
    </div>
    <el-divider content-position="center">发热情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>发热第</span>&nbsp;&nbsp;
        <div class="box-border">
          {{ info.feverDayNum }}
        </div>&nbsp;&nbsp;
        <span>天</span>
      </div>
      <div class="info-box">
        <span>最高</span>&nbsp;&nbsp;
        <div class="box-border">
          {{ info.highTemperature }}
        </div>&nbsp;&nbsp;
        <span>℃</span>
      </div>
      <div class="info-box">
        <span>发热相关症状 :</span>&nbsp;&nbsp;
        <span>
          {{ info.feverSymptom === 1 ? info.symptomDetail : '无' }}
        </span>
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>发热时间间隔 :</span>&nbsp;&nbsp;
        <span>
          {{ info.feverTimeInterval === 1 ? '间隔发热' : '持续发热' }}
        </span>
      </div>
      <div class="info-box">
        <span>发热用药 :</span>&nbsp;&nbsp;
        <span>{{ info.feverMedicateStatus === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
        <div class="box-border" v-if="info.feverMedicateStatus===1">
          {{ info.medicateDetail }}
        </div>
      </div>
    </div>
    <el-divider content-position="center">咳嗽情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>咳嗽第</span>&nbsp;&nbsp;
        <div class="box-border">
          {{ info.coughDayNum }}
        </div>&nbsp;&nbsp;
        <span>天</span>
      </div>
      <div class="info-box">
        <span>加重第</span>&nbsp;&nbsp;
        <div class="box-border">
          {{ info.aggravateDayNum }}
        </div>&nbsp;&nbsp;
        <span>天</span>
      </div>
      <div class="info-box">
        <span>咳嗽时间 :</span>&nbsp;&nbsp;
        <span>{{ info.coughTimes }}</span>
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>咳嗽相关因素 :</span>&nbsp;&nbsp;
        <span>{{ info.coughRelatedFactor === 1 ? info.coughFactorDetail : '无' }}</span>
      </div>
      <div class="info-box">
        <span>咳嗽伴随症状 :</span>&nbsp;&nbsp;
        <span>{{ info.coughVomitStatus === 1 ? '有' : '无' }}呕吐;{{
            info.coughAwakeningStatus === 1 ? '有' : '无'
          }}夜里惊醒;</span>
      </div>
      <div class="info-box">
        <span>发热时有无咳嗽 :</span>&nbsp;&nbsp;
        <span>{{ info.feverCoughStatus === 1 ? '有' : '无' }}</span>
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>咳嗽特点 :</span>&nbsp;&nbsp;
        <span>{{ info.coughPeculiarity }}</span>
      </div>
      <div class="info-box" style="width: 60%">
        <span>咳嗽录音 :</span>&nbsp;&nbsp;
        <div v-if="info.coughRecordedUrlArr&&info.coughRecordedUrlArr.length>0">
          <el-link style="margin-right: 10px" icon="el-icon-video-play" type="primary" @click="play(item)"
                   v-for="(item,index) in info.coughRecordedUrlArr" :key="index">播放
          </el-link>
        </div>
        <span v-else>
          无
        </span>
      </div>
    </div>
    <el-divider content-position="center">足跟循环情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>图片/视频 :</span>&nbsp;&nbsp;
        <div class="box-image" style="line-height: 50px" v-if="info.heelExampleUrl!=null">
          <el-link v-if="info.heelExampleUrl.includes('mp4')" icon="el-icon-video-play" type="primary"
                   @click="playVideo(info.heelExampleUrlArr[0].url)">播放
          </el-link>
          <el-image
              v-else
              style="height: 100%;width: 100%"
              @click="showImage(info.heelExampleUrl)"
              :src="info.heelExampleUrlArr[0].url"
              :preview-src-list="srcList"
              fit="contain"></el-image>
        </div>
        <div v-else>
          无
        </div>
      </div>
      <div class="info-box">
        <span>足跟颜色 :</span>&nbsp;&nbsp;
        <div class="box-image" v-if="info.heelColor">
<!--          <span>-->
<!--            {{ info.heelColor === 1 ? '颜色正常' : info.heelColor === 2 ? '颜色发暗' : info.heelColor === 3 ? '颜色苍白' : '颜色青紫' }}-->
<!--          </span>-->
          <el-image v-if="info.heelColor === 1" style="width: 100%;height: 100%" @click="showImage(require('@/assets/images/1.jpg'))" :preview-src-list="srcList" :src="require('@/assets/images/1.jpg')"></el-image>
          <el-image v-else-if="info.heelColor === 2" style="width: 100%;height: 100%" @click="showImage(require('@/assets/images/2.jpg'))" :preview-src-list="srcList" :src="require('@/assets/images/2.jpg')"></el-image>
          <el-image v-else-if="info.heelColor === 3" style="width: 100%;height: 100%" @click="showImage(require('@/assets/images/3.jpg'))" :preview-src-list="srcList" :src="require('@/assets/images/3.jpg')"></el-image>
          <el-image v-else style="width: 100%;height: 100%" @click="showImage(require('@/assets/images/4.jpg'))" :preview-src-list="srcList" :src="require('@/assets/images/4.jpg')"></el-image>
        </div>
        <div v-else>
          <span>无</span>
        </div>
      </div>
      <div class="info-box">
        <span>足跟温度 : </span>&nbsp;&nbsp;
        <span>
          {{
            info.heelTemperature === 1 ? '温' : info.heelTemperature === 2 ? '凉' : info.heelTemperature === 3 ? '热' : '无'
          }}
        </span>&nbsp;&nbsp;
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>足跟按压变红 : </span>&nbsp;&nbsp;
        <span>
          {{ info.heelPressRedTime === 1 ? '>3秒' : info.heelPressRedTime === 0 ? '<=3秒' : '无' }}
          </span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>足心软硬度 : </span>&nbsp;&nbsp;
        <span>
          {{
            info.heelHardness === 1 ? '软(唇)' : info.heelHardness === 2 ? '韧(鼻)' : info.heelHardness === 3 ? '硬(额)' : '无'
          }}
        </span>&nbsp;&nbsp;
      </div>
    </div>
    <el-divider content-position="center">喘息等情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>喘息 : </span>&nbsp;&nbsp;
        <span v-if="info.gaspStatus&&info.gaspStatus===1">有 第{{info.gaspDayNum}}天</span>&nbsp;&nbsp;
        <span v-if="!info.gaspStatus||info.gaspStatus===0">无</span>
      </div>
      <div class="info-box">
        <span>喷嚏 : </span>&nbsp;&nbsp;
<!--        <span>{{ info.sneezeStatus === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;-->
        <span v-if="info.sneezeStatus&&info.sneezeStatus===1">有 第{{info.sneezeDayNum}}天</span>&nbsp;&nbsp;
        <span v-if="!info.sneezeStatus||info.sneezeStatus===0">无</span>
      </div>
      <div class="info-box">
        <span>咽痛 : </span>&nbsp;&nbsp;
<!--        <span>{{ info.anginaStatus === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;-->
        <span v-if="info.anginaStatus&&info.anginaStatus===1">有 第{{info.anginaDayNum}}天</span>&nbsp;&nbsp;
        <span v-if="!info.anginaStatus||info.anginaStatus===0">无</span>
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>暗哑 : </span>&nbsp;&nbsp;
<!--        <span>{{ info.dullStatus === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;-->
        <span v-if="info.dullStatus">有 {{info.dullDegree===1?'轻':info.dullDegree===2?'中':info.dullDegree===3?'重':'无'}}</span>&nbsp;&nbsp;
        <span v-if="!info.dullStatus||info.dullStatus===0">无</span>
      </div>
      <div class="info-box">
        <span>喘息或呼吸困难视频 :</span>&nbsp;&nbsp;
        <div v-if="info.gaspBreathVideoUrl">
          <el-link icon="el-icon-video-play" type="primary" @click="playVideo(info.gaspBreathVideoUrlArr[0].url)">播放
          </el-link>
        </div>
        <div v-else>
          无
        </div>
      </div>
    </div>
    <el-divider content-position="center">其他相关情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>手揉鼻子眼睛 : </span>&nbsp;&nbsp;
        <span>{{ info.kneadNoseEye === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>幼时湿疹 : </span>&nbsp;&nbsp;
        <span>{{ info.eczemaStatus === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
        <span v-if="info.eczemaStatus===1&&info.eczemaDegree">
          {{ info.eczemaDegree === 1 ? '轻' : info.eczemaDegree === 2 ? '中' : '重' }}
        </span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>是否有过敏性鼻炎 : </span>&nbsp;&nbsp;
        <span>{{ info.allergyRhinitis === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>父母过敏性鼻炎 : </span>&nbsp;&nbsp;
        <span>{{ info.parentAllergyRhinitis === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>过敏源 : </span>&nbsp;&nbsp;
        <span>{{ info.allergySource === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
        <span>{{ info.allergySourceDetail }}</span>
      </div>
    </div>
    <el-divider content-position="center">过敏情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>青霉素/头部过敏史 : </span>&nbsp;&nbsp;
        <span>{{ info.penicillinCephalosporinAllergy === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>其他过敏药物 : </span>&nbsp;&nbsp;
        <span>{{ info.otherAllergyMedicineDetail ? info.otherAllergyMedicineDetail : '无' }}</span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>食物过敏 : </span>&nbsp;&nbsp;
        <span>{{ info.foodAllergyMedicineDetail ? info.foodAllergyMedicineDetail : '无' }}</span>&nbsp;&nbsp;
      </div>
    </div>
    <el-divider content-position="center">其他疾病情况</el-divider>
    <div class="box-info">
      <div class="info-box">
        <span>近两天皮疹 : </span>&nbsp;&nbsp;
        <span>{{ info.recentRash === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
      </div>
      <div class="info-box">
        <span>下面部位皮疹 : </span>&nbsp;&nbsp;
        <span>{{ info.lowerPartRash === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
        <span v-if="info.lowerPartRash===1&&info.lowerPartRashDetail">{{ info.lowerPartRashDetail }}</span>
      </div>
      <div class="info-box">
        <span>图片/视频 :</span>&nbsp;&nbsp;
        <div v-if="info.rashShowUrl&&info.rashShowType===0" class="box-image">
          <el-image
              style="height: 100%;width: 100%"
              @click="showImage(info.rashShowUrlArr[0].url)"
              :src="info.rashShowUrlArr[0].url"
              :preview-src-list="srcList"
              fit="contain"></el-image>
        </div>
        <div v-if="info.rashShowUrl&&info.rashShowType===1">
          <el-link icon="el-icon-video-play" type="primary" @click="playVideo(info.rashShowUrlArr[0].url)">播放
          </el-link>
        </div>
        <div v-else>
          无
        </div>
      </div>
    </div>
    <div class="box-info">
      <div class="info-box">
        <span>有无下列表现 : </span>&nbsp;&nbsp;
        <span>{{ info.otherExpression === 1 ? '有' : '无' }}</span>&nbsp;&nbsp;
        <span v-if="info.otherExpression===1&&info.otherExpressionDetail">{{ info.otherExpressionDetail }}</span>
      </div>
      <!--      <div class="info-box">-->
      <!--        <span>有无下列表现 : </span>&nbsp;&nbsp;-->
      <!--        <span>其他</span>&nbsp;&nbsp;-->
      <!--        <span>胸闷;胸痛;咳血</span>-->
      <!--      </div>-->

    </div>

    <el-dialog
        title="视频播放"
        :visible.sync="centerDialogVisible"
        width="30%"
        :before-close="beforeClose"
        center>
      <div>
        <vue-core-video-player v-if="showVideo"
                               :autoplay="false"
                               title="视频播放"
                               preload="nona"
                               :loop="true"
                               controls="auto"
                               :src="videoUrl"></vue-core-video-player>
      </div>
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button type="primary" @click="beforeClose">关 闭</el-button>-->
<!--  </span>-->
    </el-dialog>

    <el-dialog
        title="播放中"
        :before-close="beforeClose"
        :visible.sync="centerDialogVisible2"
        width="30%"
        center>
      <div style="text-align: center;" >
        <el-image
            style="width: 200px; height: 200px"
            :src="require('@/assets/music.gif')"
            :fit="fit"></el-image>
      </div>
<!--      <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="centerDialogVisible2 = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="centerDialogVisible2 = false">确 定</el-button>-->
<!--  </span>-->
    </el-dialog>

  </div>
</template>

<script>
export default {
  props: ['info'],
  name: "clinical",
  data() {
    return {
      showVideo: false,
      centerDialogVisible: false,
      centerDialogVisible2:false,
      audio: new Audio(),
      srcList: [],
      videoUrl: null
    }
  },
  beforeDestroy() {
    if (this.audio) {
      this.audio.pause()
    }
  },
  methods: {
    beforeClose() {
      this.centerDialogVisible = false
      this.centerDialogVisible2 = false
      this.audio.pause()
      this.showVideo = false
    },
    showImage(url) {
      this.srcList = []
      this.srcList.push(url)
    },
    playVideo(url) {
      this.showVideo = true
      this.videoUrl = url
      this.centerDialogVisible = true
    },
    play(url) {
      this.centerDialogVisible2 = true
      // 开启自动播放
      this.audio.autoplay = true;
      this.audio.src = url
      this.audio.play() // 播放
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #0c4070;

  .box-info {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .info-box {
      width: 40%;
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      box-sizing: border-box;

      //.box-border {
      //  padding: 5px 10px;
      //  box-sizing: border-box;
      //  border: 1px solid #ccc;
      //  display: flex;
      //  align-items: center;
      //  justify-content: center;
      //}

      .box-image {
        width: 50px;
        height: 50px;
        //background-color: #d9d9d9;
      }
    }
  }
}
</style>
